<div class="f-header">
	<div class="f-header-box clearfix">
		<a href="${s.base}"  class="logo" title="网校在线学习平台"></a>
		<nav class="header-nav">
			<a href="${s.base}" class="header-nav-item">首 页</a>
			<a href="${s.base}/course/list.html" class="header-nav-item">课 程</a>
			<a href="${s.base}/course/learn.html" class="header-nav-item">Java</a>
			<a href="${s.base}/user/home.html" class="header-nav-item">我的</a>
			<a href="${s.base}/cms/index.html" target="_blank" class="header-nav-item">教师端</a>
			<a href="${s.base}/opt/index.html" target="_blank" class="header-nav-item">运营</a>
		</nav>
	
		<nav class="header-nav" style="float:right">
			<a href="#myModal" class="header-nav-item"  data-toggle="modal" onclick="login();"  style="margin-right:0px;font-size:14px;">登录</a>
			<a href="#myModal" class="header-nav-item" data-toggle="modal" onclick="registe();"  style="margin-left:0px;font-size:14px;">注册</a>
	        <a href="#" class="header-nav-item"  style="margin-left:0px;font-size:14px;" id="userdetail">头像</a>
		</nav>
		
	</div>
</div>

<script type="text/javascript">
	function login(){
		$('#loginTitle').css('color','#337Ab7');
		$('#loginForm').show();
		$('#registeTitle').css('color','#000');
		$('#registeForm').hide();
	}
	function registe(){
		$('#loginTitle').css('color','#000');
		$('#loginForm').hide();
		$('#registeTitle').css('color','#337Ab7');
		$('#registeForm').show();
	}
	
	$(function(){
		$("#userdetail").popover({
            trigger:'manual',
            placement : 'bottom',
            html: 'true',
            content : '<div style="width:300px;height:300px;"></div>',
            animation: false
        }).on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(this).siblings(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide")
                }
            }, 0);
        });
		
		//菜单
		$(".category").popover({
            trigger:'manual',
            placement : 'right',
            html: 'true',
            content : '',
            animation: false
        }).on("mouseenter", function () {
            var cid = $(this).attr('c-id');
            $('#' + cid).show();
            $('#' + cid).hover(function(){
            	$('#' + cid).show();
            },function(){
            	$('#' + cid).hide();
			});
        }).on("mouseleave", function () {
            var cid = $(this).attr('c-id');
            $('#' + cid).hide();
        });
	});
</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  style="position:fixed; top:30%;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" style="font-size:18px;">×</span>
                </button>
                <h4 class="modal-title"  id="loginTitle"  style="float: left; color: #337Ab7;cursor: pointer; " onclick="login();">登 录</h4>
                <h4 class="modal-title"  id="registeTitle"  style="float: left;margin-left: 20px;cursor: pointer;" onclick="registe();">注 册</h4>
                <div class="clearfix"></div>
            </div>
            
            <div class="modal-body">
               	<form id="loginForm" class="form-horizontal" style="padding: 0px 20px;">
                      <div class="form-group">
                          <input type="email" class="form-control"  id="username"  placeholder="用户名">
                      </div>
                      <div class="form-group help">
                          <input type="password" class="form-control"  id="password"  placeholder="密　码">
                      </div>
                      <div class="form-group">
                          <label>
                           <input type="checkbox" value="None" id="checkbox1" name="check">
                           <span class="text" style="color: #787D82;font-size: 14px;">下次自动登录</span>
                          </label>
                      </div>
                      
                      <a href="javascript:void(0)">
                      	<div class="header-login-btn">登 录</div>
                      </a>
                  </form>
                  
                   <form id="registeForm" class="form-horizontal" style="padding: 0px 20px;display: none;">
                       <div class="form-group">
                           <input type="email" class="form-control"  id="username"  placeholder="用户名">
                       </div>
                       <div class="form-group help">
                           <input type="password" class="form-control"  id="password"  placeholder="密　码">
                       </div>
                       <a href="javascript:void(0)">
                      	<div class="header-login-btn">注 册</div>
                       </a>
                   </form>
                  
            </div>
			
        </div>
    </div>
</div>

